<template>
    <ul class="list">
       <li class="item" v-for="item of letters" 
       :ref="item"
       :key="item"
        @click="handleletterclick"
       @touchstart="handletouchstart"
        @touchmove="handletouchmove"
         @touchend="handletouchend"
       >{{item}}</li>
        
    </ul>
</template>
<script>
export default {
 name:'CityAlph',
 props:{
     city:Object
 },
 computed:{
     letters () {
         const letters=[]
         for(let i in this.city){
             letters.push(i)
         }
         return letters
     }
 },
 data(){
  return{
        touchStatus:false,//定义一个标识，判断什么时候触发handleTouchMove方法
          startY : 0,
          timer : null
      
      }
 },
 undata(){
    this.startY= this.$refs['A'] [0].offsetTop
 },
 methods:{
     handleletterclick (e){
     this.$emit('change',e.target.innerText)
     },
     handletouchstart(){
     this.touchStatus=true
     },
     handletouchmove (e){
     if(this.touchStatus){
         if (this.timer) {
             clearTimeout(this.timer)
         }
         this.timer=setTimeout(() => {
         const touchY=e.touches[0].clientY - 79
         const index=Math.floor((touchY-this.startY) /20)
        if (index >=0  && index < this.letters.length) {
          this.$emit('change',this.letters[index])   
        }    
         }, 16)  
     }
     },
    handletouchend(){
     this.touchStatus=false
     }
 } 
}
</script>
<style lang="stylus" scoped>
@import '~styles/vieble.styl';
 .list
   display:flex
   flex-direction :column
   justify-content :center
   position :absolute
   top  1.58rem 
   right :0
   bottom :0
   width :.4rem    
   .item
     line-height :.4rem
     text-align :center
     color:$bgcolor
</style>

